<template>
    <div ref="main" class="main"></div>
    <div ref="main2" class="main2"></div>
    <div ref="main3" class="main3"></div>
    <div ref="main4" class="main4"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

onMounted(() => {
    initChart()
    initChart2()
    initChart3()

    extendShapes()
    initChart4()
})

const main = ref()
const main2 = ref()
const main3 = ref()
const main4 = ref()

const extendShapes = (offsetX = 20, sliderWidth = 8, offsetTick = 14) => {
    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: (ctx, shape) => {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x - offsetTick, shape.y]
            const c1 = [shape.x - offsetTick + offsetX, shape.y]
            const c2 = [xAxisPoint[0] - offsetTick + offsetX, xAxisPoint[1]]
            const c3 = [xAxisPoint[0] - offsetTick, xAxisPoint[1]]
            ctx
                .moveTo(c0[0], c0[1])
                // @ts-ignore
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath()
        },
    })
    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: (ctx, shape) => {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x - offsetTick + offsetX, shape.y]
            const c2 = [shape.x - offsetTick + offsetX + sliderWidth, shape.y - sliderWidth]
            const c3 = [
                xAxisPoint[0] - offsetTick + offsetX + sliderWidth,
                xAxisPoint[1] - sliderWidth + 4,
            ]
            const c4 = [shape.x - offsetTick + offsetX, xAxisPoint[1]]
            ctx
                .moveTo(c1[0], c1[1])
                // @ts-ignore
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath()
        },
    })
    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: (ctx, shape) => {
            const c1 = [shape.x - offsetTick, shape.y]
            const c2 = [shape.x - offsetTick + offsetX, shape.y] // 右点
            const c3 = [shape.x - offsetTick + offsetX + sliderWidth, shape.y - sliderWidth]
            const c4 = [shape.x - offsetTick + sliderWidth, shape.y - sliderWidth]
            ctx
                .moveTo(c1[0], c1[1])
                // @ts-ignore
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .lineTo(c1[0], c1[1])
                .closePath()
        },
    })
    // 绘制底面
    const CubeBottom = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: (ctx, shape) => {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [xAxisPoint[0] - offsetTick, xAxisPoint[1]]
            const c2 = [xAxisPoint[0] - offsetTick, xAxisPoint[1] + 6] // 右点
            const c3 = [xAxisPoint[0] - offsetTick + offsetX + sliderWidth, xAxisPoint[1] + 6]
            const c4 = [xAxisPoint[0] - offsetTick + offsetX + sliderWidth, xAxisPoint[1] - 6]
            const c5 = [xAxisPoint[0] - offsetTick + offsetX, xAxisPoint[1]]
            ctx
                .moveTo(c1[0], c1[1])
                // @ts-ignore
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .lineTo(c5[0], c5[1])
                .lineTo(c1[0], c1[1])
                .closePath()
        },
    })
    // 注册四个面图形
    echarts.graphic.registerShape("CubeLeft", CubeLeft)
    echarts.graphic.registerShape("CubeRight", CubeRight)
    echarts.graphic.registerShape("CubeTop", CubeTop)
    echarts.graphic.registerShape("CubeBottom", CubeBottom)
}

const initChart4 = () => {
    let myChart = echarts.init(main4.value);

    let linearArr = [
        "#0079e4 ",
        "#000af5 ",
        "#36c9ff ",
        "#003efa",
        "#0099e4",
        "#4a9df7",
        "rgba(0, 31, 117, 0.3)",
        "rgba(0, 153, 228, 0.3)",
    ]

    let option = {
        grid: {
            top: "12%",
            left: "10%",
            right: "10%",
            bottom: "10%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            data: [],
            axisLine: {
                lineStyle: {
                    color: "#fff",
                },
            },
            axisTick: {
                alignWithLabel: true,
            },
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff",
                },
            },
            splitLine: {
                lineStyle: {
                    color: "#3a79c2",
                },
            },
        },
        tooltip: {
            show: true,
            position: "bottom",
            backgroundColor: "#fff",
            textStyle: {
                color: "#000",
                fontSize: 12,
                lineHeight: 24,
            },
        },
        series: [
            {
                type: "custom",
                renderItem: (params: any, api: any) => {
                    const location = api.coord([api.value(0), api.value(1)])
                    return {
                        type: "group",
                        children: [
                            {
                                type: "CubeLeft",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: linearArr[0],
                                        },
                                        {
                                            offset: 1,
                                            color: linearArr[1],
                                        },
                                    ]),
                                },
                            },
                            {
                                type: "CubeRight",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: linearArr[2],
                                        },
                                        {
                                            offset: 1,
                                            color: linearArr[3],
                                        },
                                    ]),
                                },
                            },
                            {
                                type: "CubeTop",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: linearArr[4],
                                        },
                                        {
                                            offset: 1,
                                            color: linearArr[5],
                                        },
                                    ]),
                                },
                            },
                            {
                                type: "CubeBottom",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: linearArr[6],
                                        },
                                        {
                                            offset: 1,
                                            color: linearArr[7],
                                        },
                                    ]),
                                },
                            },
                        ],
                    }
                },
                data: [],
            },

            {
                type: "bar",
                label: {
                    show: true,
                    position: "top",
                    fontSize: 12,
                    color: "#fff",
                },
                itemStyle: {
                    color: "transparent",
                },
                data: [],
            },
        ],
    }

    myChart.setOption(option);
}

const initChart3 = () => {
    let myChart = echarts.init(main3.value);

    var textureImg = new Image();
    textureImg.src =
        '';

    var ROOT_PATH = 'https://echarts.apache.org/examples';
    let option = {
        color: ['#bb0004', '#FFD48A'],
        xAxis: {
            data: [
                'built-in symbol',
                'a image link',
                'dataURI of a image',
                'SVG DataPath',
                'pattern from image'
            ],
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0
            }
        },
        yAxis: {
            splitLine: { show: false }
        },
        series: [
            {
                type: 'pictorialBar',
                name: 'pictorial element',
                symbolSize: ['100%', '70%'],
                symbolPosition: 'center',
                z: 10,
                data: [
                    {
                        value: 60,
                        // Built-in type, can be 'circle', 'rect', 'roundRect', 'square', 'diamond', 'triangle', 'pin', 'arrow'.
                        symbol: 'diamond'
                    },
                    {
                        value: 60,
                        // Image link.
                        symbol: 'image://' + ROOT_PATH + '/data/asset/img/hill-Qomolangma.png'
                    },
                    {
                        value: 60,
                        // Image dataURI.
                        symbol:
                            'image://'
                    },
                    {
                        value: 60,
                        // SVG DataPath
                        symbol:
                            'path://M40.02-99c2.07,1.21,4.26,2.25,6.19,3.66c5.94,4.34,8.23,12.57,4.95,19.79 c-3.21,7.08-6.82,14.03-10.86,20.67c-2.17,3.56-1.25,5.38,1.99,6.36c2.94,0.89,6.36,1.91,9.15,1.21c5.51-1.4,8.33,1.23,10.66,5.29 c4.71,8.22,9.72,16.29,13.84,24.8C81.06-6.65,89,0.4,99.56,5.17C109.82,9.8,120,14.7,129.85,20.15c4.72,2.61,9.09,6.37,10.24,12.97 c-2.89-1.93-5.2-3.75-7.78-5.04c-0.99-0.5-2.6,0.22-4.83,0.5c-5.36-9.35-16.8-9.4-26.74-12.62C91.68,13.04,81.82,11.37,75.66,3 c-5.98-8.13-11.61-16.52-17.4-24.79c-0.46-0.66-0.98-1.27-1.66-2.16c-3.21,7.75-6.78,15-9.12,22.63c-1.15,3.76-0.64,8.37,0.26,12.33 c0.81,3.59,3.01,6.92,4.87,10.22c6.73,11.95,2.41,22.89-2.91,33.75c-0.35,0.72-0.86,1.43-1.46,1.97 c-7.11,6.38-14.48,12.5-21.24,19.22c-2.08,2.07-3.1,5.7-3.62,8.77c-1.92,11.44-3.81,22.92-4.93,34.46 c-0.5,5.16,1.06,10.49,1.28,15.75c0.23,5.7,0.39,11.47-0.15,17.13c-1.15,12.11-2.83,24.17-4.11,36.27c-0.18,1.72,0.8,3.53,1.13,5.33 c0.88,4.76-0.22,6.23-4.71,5.17c-4.53-1.06-8.86-2.94-14.27-4.8c1.98-1.62,2.84-2.83,3.94-3.12c5.42-1.44,7-5.2,6.39-10.23 c-1.39-11.39-3.15-22.73-4.24-34.14c-0.53-5.56,0.16-11.23,0.24-16.85c0.06-4.49,0.01-8.97,0.01-14.72 c-2.79,1.53-5.2,2.27-6.79,3.83c-4.26,4.19-8.39,8.56-12.11,13.22c-1.55,1.95-2.19,4.76-2.79,7.29c-0.47,1.99,0.6,5.02-0.48,6.05 c-2.17,2.08-5.2,3.79-8.13,4.38c-3.61,0.73-7.49,0.18-12.26,0.18c6.34-8.69,11.91-16.11,17.22-23.71c3.29-4.71,6.23-9.67,9.24-14.58 c2.15-3.5,3.76-7.4,6.3-10.57c5.38-6.73,6.74-14.28,6.72-22.64C0.88,68.3,1.36,57.91,2.26,47.58c0.69-7.85,2.15-15.67,3.7-23.41 c0.77-3.83,2.89-7.39,3.72-11.22c1.83-8.4-1.9-16-4.38-23.95C2.96-5.34-0.31,0.12-1.5,6c-1.96,9.72-7.34,17.44-12.26,25.57 c-4.39,7.25-8.79,14.52-12.75,22.01c-2.64,5-4.5,10.41-6.83,15.92c-4.82-5.28-4.65-10.59-0.94-16.97 C-21.4,30.4-12.08,6.78-6.17-18.12c1.4-5.88,1.24-12.11,2.23-18.12c1.2-7.27,4.15-9.56,11.39-9.69c8.65-0.14,13.86-4.77,14.48-13.51 c0.35-5.01,0.16-10.11-0.28-15.12c-0.82-9.3,2.49-16.57,10.17-21.69c2.08-1.39,4.78-1.87,7.2-2.76C39.35-99,39.69-99,40.02-99z'
                    },
                    {
                        value: 60,
                        symbol: 'circle',
                        // Pattern
                        itemStyle: {
                            color: {
                                image: textureImg,
                                repeat: 'repeat'
                            }
                        }
                    }
                ]
            }
        ]
    }

    myChart.setOption(option);
}

const initChart2 = () => {
    let myChart = echarts.init(main2.value);

    let option = {
        legend: {
            data: ['销售量'],
            textStyle: {
                color: '#fff'
            }
        },
        xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期七']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '销售量',
                data: [
                    120,
                    {
                        value: 200,
                        itemStyle: {
                            color: '#a90000'
                        }
                    },
                    150,
                    80,
                    70,
                    110,
                    130
                ],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top'
                },
            }
        ]
    }

    myChart.setOption(option);
}

const initChart = () => {
    let myChart = echarts.init(main.value);

    const data = [1360, 1320, 732, 701];
    const data2 = [500, 800, 900, 360];
    const sideData = data.map(item => item + 90);
    const sideData2 = data.map(item => item + 90);
    var colorArr = ["#0C628C", "#3887D5", "#2570BB"];
    var color = {
        type: "linear",
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: colorArr[0],
            },
            {
                offset: 0.5,
                color: colorArr[0],
            },
            {
                offset: 0.5,
                color: colorArr[1],
            },
            {
                offset: 1,
                color: colorArr[1],
            },
        ],
    };
    var barWidth = 20;
    var option = {
        tooltip: {
            trigger: 'axis',
            formatter: (params: any) => {
                var str = params[0].name + ":";
                params.filter((item: any) => {
                    if (item.componentSubType == "bar") {
                        str += "<br/>" + item.seriesName + "：" + item.value;
                    }
                });
                return str;
            },
        },
        grid: {
            top: '10%',
            left: '10%',
            right: '5%',
            bottom: '15%',
        },
        legend: {
            show: false,
            data: ['本期', '同期'],
            textStyle: {
                color: '#fff',
                fontSize: '20'
            }
        },
        xAxis: {
            data: ['毕节市', '七星关区', '大方县', '黔西县'],
            //坐标轴
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#214776'
                },
                textStyle: {
                    color: '#fff',
                    fontSize: '10'
                }
            },
            type: 'category',
            axisLabel: {
                color: '#C5DFFB',
                fontWeight: 500,
                fontSize: '14'
            },
            axisTick: {
                textStyle: {
                    color: '#fff',
                    fontSize: '16'
                },
                show: false,
            },
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            //坐标轴
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: '#214776'
                },
                textStyle: {
                    color: '#fff',
                    fontSize: '10'
                }
            },
            axisTick: {
                show: false
            },
            //坐标值标注
            axisLabel: {
                show: true,
                color: '#C5DFFB',
            },
            //分格线
            splitLine: {
                lineStyle: {
                    color: '#13365f'
                }
            }
        },
        series: [
            {
                z: 1,
                name: '本期',
                type: "bar",
                barWidth: barWidth,
                barGap: "0%",
                data: data,
                itemStyle: {
                    color: color
                },
            },
            {
                z: 2,
                name: '本期',
                type: "pictorialBar",
                data: sideData,
                symbol: "diamond",
                symbolOffset: ["-75%", "50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    color: color
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 3,
                name: '本期',
                type: "pictorialBar",
                symbolPosition: "end",
                data: data,
                symbol: "diamond",
                symbolOffset: ["-75%", "-50%"],
                symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                itemStyle: {
                    borderWidth: 2,
                    color: colorArr[2]
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 1,
                name: '同期',
                type: "bar",
                barWidth: barWidth,
                barGap: "50%",
                data: data2,
                itemStyle: {
                    color: color
                },
            },
            {
                z: 2,
                name: '同期',
                type: "pictorialBar",
                data: sideData2,
                symbol: "diamond",
                symbolOffset: ["75%", "50%"],
                symbolSize: [barWidth, 10],
                itemStyle: {
                    color: color
                },
                tooltip: {
                    show: false,
                },
            },
            {
                z: 3,
                name: '同期',
                type: "pictorialBar",
                symbolPosition: "end",
                data: data2,
                symbol: "diamond",
                symbolOffset: ["75%", "-50%"],
                symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
                itemStyle: {
                    borderWidth: 2,
                    color: colorArr[2]
                },
                tooltip: {
                    show: false,
                },
            },
        ],
    };
    myChart.setOption(option);
}
</script>

<style lang="less" scoped>
.main,
.main2,
.main3,
.main4 {
    display: inline-block;
    width: 500px;
    height: 300px;
    margin: 10px;
    background-color: #102A49;
}
</style>